<template>
  <div>
    <header>
      <div class="div" @click="back()">
        <img src="../../assets/返回.png" alt="">
        <span>返回</span>
      </div>
      <div class="div"></div>
      <div class="div" @click="clickBaocun">
        <span>保存</span>
      </div>
    </header>
    <div class="content">
      <van-cell is-link title="项目名称" @click="clickTitle()" :value="itemName"/>
      <van-cell is-link v-for="(item, index) in titleList"
                :key="index"
                :title="item"
                :value="valueList[index]"
                @click="clickShow(index)" />
<!--      <van-cell is-link title="治疗时长" :border="false">-->
<!--        <template #right-icon>-->
<!--          <input type="text" style="border: none;background: #FFFFFF">-->
<!--        </template>-->
<!--      </van-cell>-->
      <van-field
        v-model="timeMsg"
        label="治疗时长"
        type="number"
        placeholder="请输入治疗时长(分钟)"
        input-align="right"
        maxlength="3"
      />
    </div>
    <van-popup v-model="showPicker"
               round position="bottom">
      <van-picker
        :title="'选择' + titleList[this.nowIndex]"
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'BuildDoctorAdvice',
  data () {
    return {
      patientid: '', // 患者id
      doctorid: '', // 医生id
      itemName: '', // 项目名称
      itemId: '', // 项目id
      timeMsg: '', // 治疗时间
      columns: [],
      valueList: [],
      type: ['PT项目', 'OT项目', 'ST项目', '理疗项目', '中医项目'],
      cure_method: ['手法', '器械', '理疗'],
      cure_rate: ['一天一次', '一天两次', '一天三次', '两天一次'],
      titleList: ['项目分类', '治疗部位', '治疗频次', '治疗方法'],
      list: [], // 残疾部位
      listID: [], // 残疾部位对应的值
      showPicker: false,
      item_type: '', // 项目分类
      cure: '', // 治疗频次
      method: '', // 治疗方法
      position: '', // 治疗部位
      item_id: '',
      nowIndex: -1
    }
  },
  mounted () {
    // 截取网址后的参数
    this.patientid = this.$utils.getUrlKey('patientid')
    this.doctorid = this.$utils.getUrlKey('doctorid')
    // 判断session是否存在
    if (window.sessionStorage['itemName']) {
      this.itemName = JSON.parse(window.sessionStorage.getItem('itemName'))
      this.itemId = JSON.parse(window.sessionStorage.getItem('itemId'))
    }
    this.getlistByType()
  },
  methods: {
    // 点击展示
    clickShow (index) {
      this.showPicker = true
      this.nowIndex = index
      if (index === 0) {
        this.columns = this.type
      } else if (index === 1) {
        this.columns = this.list
      } else if (index === 2) {
        this.columns = this.cure_rate
      } else if (index === 3) {
        this.columns = this.cure_method
      }
    },
    // 确定按钮
    onConfirm (value, index) {
      this.value = value
      this.valueList[this.nowIndex] = value
      if (this.nowIndex === 0) {
        // 项目分类
        this.item_type = index + 1
      } else if (this.nowIndex === 1) {
        // 治疗部位 根据字典
        this.position = this.listID[index]
        // this.position = index + 1
      } else if (this.nowIndex === 2) {
        // 治疗频次
        this.cure = index + 1
      } else if (this.nowIndex === 3) {
        // 治疗方法
        this.method = index + 1
      }
      this.showPicker = false
    },
    // 返回上一页
    back () {
      this.$router.history.go(-1)
    },
    // 点击项目名称跳转
    clickTitle () {
      this.$router.push({path: '/selectEntry', query: {doctorid: this.from_user_id, patientid: this.patientid}})
    },
    // 字典获取残疾
    getlistByType () {
      this.$http.listByType({dict_type: 'cure_position'})
        .then(res => {
          console.log(res)
          for (var i = 0; i < res.data.data.length; i++) {
            this.listID.push(res.data.data[i].dict_value)
            this.list.push(res.data.data[i].dict_name)
          }
          console.log(this.list)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击保存
    clickBaocun () {
      if (this.itemId.length <= 0) {
        Toast('请选择项目名称')
      } else if (this.item_type.length <= 0) {
        Toast('请选择项目分类')
      } else if (this.position.length <= 0) {
        Toast('请选择治疗部位')
      } else if (this.cure.length <= 0) {
        Toast('请选择治疗频次')
      } else if (this.method.length <= 0) {
        Toast('请选择治疗方法')
      } else if (this.timeMsg.length <= 0) {
        Toast('请输入治疗时长')
      } else {
        this.$http.save({
          item_id: this.itemId,
          item_type: this.item_type,
          cure_rate: this.cure,
          cure_method: this.method,
          cure_time: this.timeMsg,
          cure_position: this.position,
          doctor_user_id: this.doctorid,
          patient_user_id: this.patientid
        })
          .then(res => {
            console.log(res)
            this.$router.history.go(-1)
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
}
</script>

<style scoped>
  header{
    width: 100%;
    height: 12vw;
    background: #FFFFFF;
    display: flex;
    font-size: 15px;
    font-family: "PingFang SC";
    font-weight: bold;
    color: #1da4f2;
  }
  header img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div{
    width: 33%;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1){
  }
  .div:nth-child(3){
   justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  /deep/ .van-picker__confirm{
    color: #1da4f2;
  }
  /deep/ .van-picker__toolbar, /deep/ .van-picker__title{
    font-weight: bold;
    font-size: 15px;
    font-family: "PingFang SC";
  }
  /deep/ .van-field__label{
    color: #333;
  }
</style>
